---
title: TimePickerPopup
description: TimePickerPopup API.
---

import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
import SlintProperty from '/src/components/SlintProperty.astro';

<CodeSnippetMD imagePath="" noScreenShot scale="3" imageWidth="300" imageHeight="200" imageAlt="">
```slint
import { FilledButton, TimePickerPopup } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 600px;

    time_picker_button := FilledButton {
        text: @tr("Open Time Picker");

        clicked => {
            time_picker.show();
        }
    }

    time_picker := TimePickerPopup {
        x: (root.width - self.width) / 2;
        y: (root.height - self.height ) / 2;
        close_policy: PopupClosePolicy.no_auto_close;
        time: { hour: 12, minute: 24 };

    }
}
```
</CodeSnippetMD>

A `TimePicker` allows users to select a time using a clock interface or text input.

## Properties

### time
<SlintProperty propName="time" typeName="struct" structName="Time" >
Set the initial displayed time.

```slint "time: { hour: 12, minute: 24 };"
TimePickerPopup {
    time: { hour: 12, minute: 24 };
}
```
</SlintProperty>
